<template>
  <section>
    <div v-if="newStore">
      <span>当前部门未创建商铺，点击按钮新建。</span>
      <el-button size="mini" @click="addStoreBtn" type="primary" icon="el-icon-plus"/>
    </div>

    <el-form label-width="80px" size="mini" v-if="currStore" style="width: 600px;margin-top: 10px;border: 1px solid #eee;border-radius: 5px;padding: 5%">
      <el-form-item label="logo">
        <el-row style="display: flex;flex-direction: row;align-items: center">
          <img :src="currStore.logo" style="border: 1px solid #eee;border-radius: 5%" >
          <el-input size="mini" v-model="currStore.logo" placeholder="粘贴图片地址至此" v-if="editStore"/>
        </el-row>
      </el-form-item>
      <el-form-item label="名称">
        <el-input size="mini" v-model="currStore.name"v-if="editStore"/>
        <span v-else>{{currStore.name}}</span>
      </el-form-item>
      <el-form-item label="地址">
        <el-input size="mini" v-model="currStore.address"v-if="editStore"/>
        <span v-else>{{currStore.address}}</span>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input size="mini" v-model="currStore.contacts"v-if="editStore"/>
        <span v-else>{{currStore.contacts}}</span>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input size="mini" v-model="currStore.phone"v-if="editStore"/>
        <span v-else>{{currStore.phone}}</span>
      </el-form-item>
      <el-form-item label="描述简介">
        <el-input size="mini" v-model="currStore.description" type="textarea"v-if="editStore"/>
        <span v-else>{{currStore.description}}</span>
      </el-form-item>
      <el-form-item label="">
        <el-button v-if="editStore" size="mini" :type="currStore.id?'success':'primary'" @click="confirmBtn(currStore)">{{currStore.id?'保存':'保存'}}</el-button>
        <el-button v-if="currStore.id"size="mini" :type="currStore.id?'primary':''" @click="editStore = !editStore">{{editStore?'取消':'编辑'}}</el-button>
        <el-button v-if="newStore" size="mini" @click="currStore=null">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import newStore from './newStore'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "index",
    components:{newStore},
    data() {
      return {
        createStoreDialog:false,
        mallForm:null,
        BtnText:'新建',
        currStore:null,
        newStore:false,
        editStore:false
      }
    },
    created() {
      //判断该部门下有没有店铺
      this.getStore()
    },
    mounted() {
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch: {},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getStore(){
        this.fetch({name:"getStore",data:{departmentId: this.department.id}})
          .then(res=>{
            console.log('当前店铺-----',res)
            this.currStore=res
            this.newStore=false
            this.editStore=false
          })
          .catch(err=>{
            if(err.errCode === 'store_not_exist'){
              this.newStore=true
              this.editStore=true
              return
            }
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addStoreBtn(){
        this.currStore={
          departmentId: this.department.id,
          name:'',
          description:'',logo:'',phone:'',address:'',contacts:'',position:'',data:[]
        }
        // this.createStoreDialog=true
      },
      confirmBtn(e){
        console.log('dialog传来的数据----',e)
        if(e.id){
          this.updateStore(e)
        }else {
          this.createStore(e)
        }
      },
      createStore(data){
        this.fetch({name:"createStore",data})
          .then(res=>{
            this.$message({type:'success',message:'新建成功！'})
            this.createStoreDialog=false
            this.getStore()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateStore(data){
        this.fetch({name:"updateStore",data})
          .then(res=>{
            this.$message({type:'success',message:'更新成功！'})
            this.createStoreDialog=false
            this.getStore()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        this.currStore=row
        this.createStoreDialog=true
      },
      delBtn(row){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delStore",data:{id:row.id}})
              .then(res=>{
                this.loading=false
                this.$message({type:'success',message:'删除成功！'})
                this.getStore()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
    }
  }
</script>

<style scoped>

</style>
